<template>
	<div class="memberList">
		<el-card shadow="hover">
			<div class="member-list mb15">
				<el-form ref="formDataRef" :inline="true" :model="state.formData" label-width="100px" class="demo-form-inline">
					<el-row>
						<el-col :span="6">
							<el-form-item prop="username" label="关键词">
								<el-input
									style="width: 100%"
									maxlength="200"
									@keyup.enter="searchFun"
									@blur="state.formData.username = $utils.removeBilateralSpaces(state.formData.username)"
									v-model="state.formData.username"
									placeholder="名称、邮箱"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="levelTime" label="入会时间">
								<el-date-picker
									style="width: 100%"
									value-format="YYYY-MM-DD"
									v-model="state.formData.levelTime"
									type="date"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="username" label="直接推荐人">
								<el-select
									v-model="state.formData.username"
									filterable
									remote
									clearable
									reserve-keyword
									placeholder="请输入关键字模糊搜索"
									:remote-method="remoteMethod"
									:loading="state.pid_loading"
									@blur="onUsernanSelectBlur"
								>
									<el-option v-for="item in state.searchMemberList" :key="item.id" :label="item.username" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="memberLevelId" label="会员级别">
								<el-select style="width: 200px" v-model="state.formData.memberLevelId" clearable placeholder="选择站点">
									<el-option v-for="item in state.levelList" :key="item.id" :label="item.levelName" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 50px">
									<el-button type="primary" @click="searchFun">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" style="width: 100%">
				<el-table-column prop="orderNumber" label="序号" show-overflow-tooltip></el-table-column>
				<el-table-column width="250px" label="用户信息" show-overflow-tooltip>
					<template #default="scope">
						<p>用户姓名：{{ scope.row.name }}</p>
						<p>用户邮箱：{{ scope.row.email }}</p>
						<p>用户Id: {{ scope.row.id }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="levelName" label="会员级别" show-overflow-tooltip width="100px"></el-table-column>
				<el-table-column prop="levelTime" label="入会时间" show-overflow-tooltip width="140px"></el-table-column>
				<el-table-column prop="recommindNum" label="推广用户数量" width="120px" show-overflow-tooltip></el-table-column>
				<el-table-column prop="balance" label="佣金金额" width="120px" show-overflow-tooltip></el-table-column>
				<el-table-column prop="accountFrozen" label="钱包余额" show-overflow-tooltip></el-table-column>
				<el-table-column label="推荐佣金比列" width="120px" show-overflow-tooltip>
					<template #default="scope">
						<p>直接推荐比例：{{ scope.row.recommindZCommission }}</p>
						<p>间接推荐比例：{{ scope.row.recommindJCommission }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="pname.username" label="直接推荐人" width="120px" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="120px" fixed="right">
					<template #default="scope">
						<el-button text type="primary" @click="onOpenEdit(scope.row)">编辑</el-button>
						<el-button text type="primary" @click="onOpenRem(scope.row)">已推荐</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current="mpage.current"
				background
				v-model:page-size="mpage.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="mpage.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog v-model="state.editVisible" title="会员信息" width="500px" append-to-body destroy-on-close>
			<Edit ref="editRef" :levelList="state.levelList" :memberId="state.memberId" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCloseEdit">关闭</el-button>
					<el-button type="primary" @click="onSubmitMember(editRef)">保存</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="state.remlVisible" title="已推荐会员" width="60%" append-to-body destroy-on-close>
			<FulfilRem :memberId="state.memberId" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.remlVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="MemberList">
import Edit from './component/edit.vue';
import FulfilRem from './component/fulfilRem.vue';
import { usrInit, useEdit } from './hook';

const { state, mpage, getList, searchFun, getLevelList, onOpenEdit, onCloseEdit, onOpenRem, remoteMethod, onUsernanSelectBlur } = usrInit();
const { onSubmitMember } = useEdit({ onCloseEdit, getList });

const formDataRef = ref();
const editRef = ref();
const resetForm = () => {
	formDataRef.value.resetFields();
};

// 分页改变
const onHandleSizeChange = (val) => {
	mpage.value.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val) => {
	mpage.value.current = val;
	getList(mpage.value.current);
};

// 页面加载时
onMounted(() => {
	getList(1);
	getLevelList();
});
</script>
<style lang="scss" scoped></style>
